import Vue from 'vue';
import VueRouter, { RouteConfig } from 'vue-router';
import MainLayout from '@/layout/MainLayout.vue';

import LoginPage from '@/views/Auth/LoginPage.vue';

import DashboardPage from '@/views/Dashboard/DashboardPage.vue';

import UserList from '@/views/User/UserList.vue';
import UserPage from '@/views/User/UserPage.vue';

import RoleList from '@/views/Role/RoleList.vue';
import RolePage from '@/views/Role/RolePage.vue';

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
    {
        path: '/login',
        name: 'Login',
        component: LoginPage,
    },
    {
        path: '/',
        name: 'Home',
        component: MainLayout,
        children: [
            {
                path: '/dashboards',
                name: 'DashboardPage',
                component: DashboardPage,
            },
            {
                path: '/users',
                name: 'UserList',
                component: UserList,
            },
            {
                path: '/users/:id',
                name: 'UserPage',
                component: UserPage,
            },
            {
                path: '/roles',
                name: 'RoleList',
                component: RoleList,
            },
            {
                path: '/roles/:id',
                alias: '/roles/create',
                name: 'RolePage',
                component: RolePage,
            },
        ],
    },
];

const router = new VueRouter({
    mode: 'history',
    routes,
});

export default router;
